<template>
    <div class="list">
        <!-- <button @click="xiugai">xiugia</button> -->
        <div class="product" v-for="item,index in list" :key="index">
            <div>
                <img src="@/assets/imgs/zhengtou.png" alt="">
            </div>
            <div>
                <div>小狼抱枕</div>
                <div>2积分</div>
                <div>
                    <div class="btn">
                        立即兑换
                    </div>
                </div>
            </div>
           <div class="hot">
                <img src="@/assets/imgs/sanjiao.png" alt="">
           </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref ,defineProps,defineEmits} from "vue"
    // let list = ref([0,1,2,3,4,5,6,7,8,9,10])
 defineProps({
        list:{
            type:Array,
            default:[0,1,2,3,4,5,6,7,8,9]
        }
    })

    const emit = defineEmits<{
    (event: 'fn',val?:number |string | boolean): void
    
  }>()

  const xiugai = ()=>{
        emit('fn',22)
  }
 
</script>
 
<style lang = "less" scoped>
    .list{
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
      
        .product{
            .hot{
                position: absolute;
                left: 0;
                top: 0;

            }
            position: relative;
            transition: 0.5s;
            margin-bottom: 10px;
            margin-right: 12px;
            &:hover{
               cursor: pointer;
                transform: translateY(-10px);
                box-shadow: 0 0 10px #ccc;
                .btn{
                    background-color: #0a328e !important;
                    color: #fff;
                }
            }
            width: 24%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            div{
                &:nth-child(1){
                    img{
                        display: block;
                        height: 285px;
                        width:100%;
                    }
                }
                &:nth-child(2){
                    background-color: #fff;
                    div{
                        padding: 10px;
                        text-align: center;
                        font-size: 18px;
                        &:nth-child(2){
                            color: red;
                        }
                        &:nth-child(3){
                            .btn{
                                height: 100%;
                                width: 90px;
                                margin: 0 auto;
                                background-color: #fff;
                                border: 1px solid black;
                              
                            }
                        }
                    }
                }
            }
        }
    }
</style>